import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
import { Select, Input } from 'antd';
import ConfigTable from '../../../../components/configTable';

const CalculateCost = forwardRef((props, ref) => {
  const { value } = props;
  const [data, setData] = useState([]);

  useEffect(() => {
    if (value.feeRules) {
      if (value.feeRules.length) {
        setData(value.feeRules)
      } else {
        setData([{
          name: '',
          code: '',
          feeRuleType: 1,
          thirdFeeRuleList: [],
        }])
      }
    }
  }, [value.feeRules]);

  useImperativeHandle(ref, () => ({
    getData: () => {
      if (data.length) {
        const { thirdInterfaceId } = value;
        const { name, code } = data[0];
        if (!name || !code) {
          return [];
        } else {
          data.forEach((item) => {
            item.thirdFeeRuleList &&
              item.thirdFeeRuleList.forEach((item) => {
                item['interfaceId'] = thirdInterfaceId;
                item['feeRuleId'] = item.id;
              });
          });
        }
      }
      return data;
    },
  }));

  const handleChange = (value, index, key) => {
    const temp = data.slice();
    if (key === 'name' || key === 'code') {
      const reg = key === 'name' ? /[a-zA-Z0-9_.[\]]{1,50}/ : /[0-9a-zA-Z,]+/;
      const new_value = value.match(reg);
      temp[index][key] = new_value ? new_value[0] : '';
      return setData(temp);
    }
    temp[index][key] = value;
    setData(temp);
  };

  const cusColumns = [
    {
      title: '数据源计费参数名',
      dataIndex: 'thirdFeeRuleList.name',
      render: (_, { thirdFeeRuleList }) =>
        thirdFeeRuleList &&
        thirdFeeRuleList.map(({ name, linkPrevType }, index) => (
          <p key={index} style={!linkPrevType ? { marginBottom: '15px' } : {}}>
            {name}
          </p>
        )),
    },
    {
      title: '码值',
      dataIndex: 'thirdFeeRuleList.code',
      render: (_, { thirdFeeRuleList }) =>
        thirdFeeRuleList &&
        thirdFeeRuleList.map(({ code, linkPrevType }, index) => (
          <div key={index} style={!linkPrevType ? { marginBottom: '15px' } : {}}>
            {code}
          </div>
        )),
    },
    {
      title: '计费类型',
      dataIndex: 'thirdFeeRuleList.feeRuleType',
      render: (_, { thirdFeeRuleList }) =>
        thirdFeeRuleList &&
        thirdFeeRuleList.map(({ feeRuleTypeLabel, linkPrevType }, index) => (
          <div key={index} style={!linkPrevType ? { marginBottom: '15px' } : {}}>
            {feeRuleTypeLabel}
          </div>
        )),
    },
    {
      title: '数据源计费参数名',
      dataIndex: 'name',
      render: (text, _, index) => (
        <Input
          value={text}
          placeholder='请输入'
          maxLength={50}
          onChange={(e) => handleChange(e.target.value, index, 'name')}
        />
      ),
    },
    {
      title: '码值',
      dataIndex: 'code',
      render: (text, _, index) => (
        <Input
          value={text}
          placeholder='请输入'
          maxLength={50}
          onChange={(e) => handleChange(e.target.value, index, 'code')}
        />
      ),
    },
    {
      title: '计费类型',
      dataIndex: 'feeRuleType',
      render: (text, _, index) => (
        <Select placeholder='请选择' value={text} onChange={(value) => handleChange(value, index, 'feeRuleType')}>
          {['免费', '计次'].map((item, index) => (
            <Select.Option value={index} key={index}>
              {item}
            </Select.Option>
          ))}
        </Select>
      ),
    },
  ];

  return <ConfigTable data={data} cusColumns={cusColumns} isAdd={false} isOrder={false} isDelete={false} />;
});
export default CalculateCost;
